<script setup lang="ts">
import {ref} from 'vue'
import {ElMessage, type FormInstance} from "element-plus";
import {useRouter} from "vue-router";
import 'element-plus/dist/index.css'
import useUserStore from "@/stores/user";
import {loginAPI} from '@/api/login/index'
const router = useRouter()
//用户表单
const loginForm = ref({
  account: '',
  password: ''
})
const userStore = useUserStore()
//表单元素
const formRef = ref(null)
//表单校验
const rules = {
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 10, message: '长度在 6 到 18 个字符', trigger: 'blur'}
  ]
}
//是否同意条款
const isAgree = ref(false)

const login = async () => {
  const footer = document.querySelector('footer')
  if(footer) footer.classList.remove('isAgree')
  //表单验证是否成功
  let flag = false;
  // 校验表单
  if(formRef.value) {
    await formRef.value.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        flag = true;
      } else {
        ElMessage.error('请填写完整信息')
      }
    })
  }
  //检查是否同意条款
  if(!isAgree.value){
    ElMessage.error('请先同意隐私条款')
    if(footer) footer.classList.add('isAgree')
  }else if(flag){
    //全部验证通过，调用接口
    try {
      const res = await loginAPI(loginForm.value)
      console.log('登录成功，用户信息',res)
      if(Number(res.code) === 1){
        ElMessage({
            message: '登录成功！',
            type: 'success'
          })
        userStore.setUser(res.result)
        await router.replace({path:'/'})
      }
    }catch (err){
      ElMessage.error('账号或密码错误！')
    }
  }
}
</script>

<template>
  <header>
    <img src="/src/assets/logo.png" alt="">
    <router-link to="/">进入网站首页</router-link>
  </header>
  <div class="content">
    <div class="loginForm">
      <nav>账户登录</nav>
      <el-form :model="loginForm" label-width="auto" :rules="rules"  style="max-width: 600px" class="userForm" ref="formRef">
        <el-form-item label="账号" required prop="account">
          <el-input placeholder="请输入账号"  v-model="loginForm.account" />
        </el-form-item>
        <el-form-item label="密码" required prop="password">
          <el-input placeholder="请输入密码" v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
      </el-form>
      <footer >
        <el-checkbox v-model="isAgree">我已同意隐私服务条款</el-checkbox>
        <el-button type="primary" style="width: 100%;" @click="login" >登录</el-button>
      </footer>
    </div>
  </div>
  <footer>
    <ul>
      <li><a href="javascript:;">关于我们</a></li>
      <li><a href="javascript:;">帮助中心</a></li>
      <li><a href="javascript:;">售后服务</a></li>
      <li><a href="javascript:;">配送与验收</a></li>
      <li><a href="javascript:;">商务合作</a></li>
      <li><a href="javascript:;">搜索推荐</a></li>
      <li><a href="javascript:;">友情链接</a></li>
    </ul>
    <p>Copyright © 2024 小兔鲜儿</p>
  </footer>
</template>

<style scoped lang="less">
header{
  width: 70vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  a{
    color: black;
  }
  a:hover{
    color: #27ba9b;
  }
}
.content{
  position: relative;
  height: 480px;
  background: url("/src/assets/login-bg.png");
  background-size: 100%;
  .loginForm{
    width: 400px;
    background: white;
    border-radius: 15px;
    box-sizing: border-box;
    padding:30px;
    position: absolute;
    top: 50px;
    right: 30vw;
    nav{
      text-align: center;
      margin-bottom: 10px;
    }
  }
  footer.isAgree{
    label{
      animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
      color: red;
    }
  }
  footer {
    label{
      animation:none;
      color: black ;
    }
  }
}
footer{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px ;
  flex-direction: column;
  ul{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    li{
      margin: 0 10px;
      a{
        color: #666666;
      }
      a:hover{
        color: #27ba9b;
      }
    }
    li + li:before{
      content: "|";
      margin-right: 20px;
      color: #666666;
    }
  }
  p{
    color: #666666;
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
</style>
